
<!DOCTYPE html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <!-- <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1"> -->
    <meta charset="utf-8">
    <title>我的We爱宣言</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./CSS/index.css" type="text/css">
    <link rel="stylesheet" href="./CSS/swiper-4.3.5.min.css" type="text/css">
    <script src="./JS/size.js"></script>
    <script src="./JS/jquery-1.9.1.min.js"></script>
    <script src="./JS/swiper-4.3.5.min.js"></script>
    <!-- <script src="../JS/ResizeIMG.js"></script> -->
    <script src="./JS/mobileBUGFix.mini.js"></script>
    <script src="./JS/vconsole.min.js"></script>
    <script src="./JS/exif.js"></script>
    <script src="./JS/jquery.rotate.js"></script>
</head>

<body>

        
  
    <div class="div swiper-container swiper1 swiper2 swiper3 swiper5" id='swiper'>
            <audio src="./video/music.mp3" class="bg_music" id="bg_music" style="display: none;position: absolute;right: 1%;top: 1%" autoplay="autoplay" loop="loop"></audio>
        <div class="swiper-wrapper top-div">

            <div class="div1 swiper-slide">
                <img class="beiJing_image" src="./images/beiJing.png" />
                <img class="image-1" src="./images/baoYing.png" />
                <img class="image-2" src="./images/usana.png" />
                <img class="image-3" src="./images/we-aiHeCai.png" />
            </div>
 
            <div class="div2 swiper-slide">
                <!-- <img class="up" src="../images/shangJianTou.png" />
                <img class="down" src="../images/xiaJianTou.png" /> -->
                <img class="beiJing_image" src="./images/index_2-beiJing.png" />
                <img class="image-1" src="./images/index_2-text.png" />
                <img class="image-2" src="./images/We-are-USANA.png" />
            </div>

            <div class="div3 swiper-slide">
                <img class="beiJing_image" src="./images/index_3-bieJing.png" />
                <img class="image-1" src="./images/index_3-text.png" />
                <img class="image-2" src="./images/shiPing-2.png" />
                <div class="video">
                    <!--播放器-->
                    <video src="./video/weiAiHeCai.mp4" id="video" controls='false'></video>
                    <img class="video-image" src="./images/shiPing.png" id='videoImage' />
                    <!--视频播放按钮-->
                    <img class="btn" id='videoBtn' src="./images/boFang.png" />
                </div>
                <!--下一页跳转按钮-->
                <div class="button ">
                    <img class="image-3" src="./images/video-btn.png" />
                    <img class="image-4" src="./images/video-btn-text.png" />
                </div>
            </div>

            <div class="div4 swiper-slide swiperList">
                <div class="div4-top">
                    <img class="text-top" src="./images/index_4-text.png" />
                </div>
        
                <div class="imageDivSwiper bigImageListSwiper">
                     <!--拍照按钮-->                    
                    <img src="./images/image-btn.png" class="picture" id='picture'/>
                    <img class="he-cheng" id='heCheng' src='./images/image2-btn.png'/>
                    <!-- capture表示，可以捕获到系统默认的设备，比如：camera--照相机；camcorder--摄像机；microphone--录音。accept表示，直接打开系统文件目录 -->
                    <input class="picture-input" id='picture-input' type="file" name="cover" accept="image/*" capture="camera" multiple/>
                    <!--照片框轮播图-->              
                    <div class="swiper-wrapper bigImageList" id='bigImageList'>
                        <div class='item swiper-slide' id='4'><img src='' /></div>
                        <div class='item swiper-slide' id='5'><img src='' /></div>
                        <div class='item swiper-slide' id='0'><img src='' /></div>
                        <div class='item swiper-slide' id='1'><img src='' /></div>
                        <div class='item swiper-slide' id='2'><img src='' /></div>
                        <div class='item swiper-slide' id='3'><img src='' /></div>
                    </div>
                    <!--存放拍照的图-->
                    <img src='' class="myImageItem" /> 
                    <div class="pagination" style="bottom:-0.6rem;left: 50%;margin-left: -0.8rem;"></div>                     
                </div>

               <!--背景选择轮播图-->
                <div class="bottomSwiper imageListSwiper">  
                    <!--中间背景外框-->                 
                    <!-- <div class="middleBorder"></div>   -->
                    <!--背景选择-->                 
                    <div class="bottomList swiper-wrapper" id='bottomList' >
                        <div class='item swiper-slide' id='5'>
                            <img class='middle' src=''/>

                        </div>
                        <div class='item swiper-slide' id='6'>
                            <img class='middle' src=''/>

                        </div>
                        <div class='item swiper-slide' id='1'>
                            <img class='middle' src=''/>
                
                        </div>
                        <div class='item swiper-slide' id='2'>
                            <img class='middle' src=''/>

                        </div>
                        <div class='item swiper-slide' id='3'>
                            <img class='middle' src=''/>
                        </div>
                        <div class='item swiper-slide' id='4'>
                            <img class='middle' src=''/>
                        </div>
                    </div>
                    <!-- <div class="swiper4-pagination"></div> -->
                </div>
                 <!--合成图片提示框-->
                <div class="baoCun">
                    <div class="zhe-gai-ceng"></div>
                    <div class="ti-shi">
                        <div class="ti-shi-text">是否合成图片</div>
                        <button class="left-btn">确定</button>
                        <button class="right-btn">取消</button>
                    </div>
                </div>
            </div>

        </div>
        <!--上箭头-->
        <img class="up" src="./images/shangJianTou.png" />
        <!--左箭头-->
        <img class="isLeft" src="./images/zuoJianTou_03.png" />

        <!--下箭头-->
        <img class="down" src="./images/xiaJianTou.png" />

        <div class="div5 ">
            <img class="canvas-img" id='canvas-img' src="" crossorigin="anonymous"/>
        </div>
    </div>

</body>

<!-- <script src="./JS/jweixin-1.0.0.js" language="javascript"></script>
<script src="./JS/base.js" language="javascript"></script>
<script src="./JS/index.js" language="javascript"></script> -->
<script src="./JS/index.js" language="javascript"></script>

</html>